<template>
    <div class="settinginfo">
        <div class="container">
            <div class="row main">
                <div class="col-12 col-md-4 left">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-left">
                            <div class="d-flex align-items-center justify-content-left gap-3">
                                <div class="avatar">
                                    <img src="../../assets/images/avatar1.svg" alt="">
                                </div>
                                <div>
                                    <div class="name">test <img src="../../assets/images/edit.svg" alt=""></div>
                                    <div class="edit">
                                        <span>修改密码</span>
                                        <span>修改手机</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul>
                                <li class="d-flex justify-content-between align-items-center" @click="handleChange('order')">
                                    <div class="d-flex gap-3">
                                        <img src="../../assets/images/order.svg" alt="">
                                        <span>我的订单</span>
                                    </div>
                                    <img src="../../assets/images/right.svg" alt="">
                                </li>
                                <li class="d-flex justify-content-between align-items-center" @click="handleChange('info')">
                                    <div class="d-flex gap-3">
                                        <img src="../../assets/images/info.svg" alt="">
                                        <span>个人资料</span>
                                    </div>
                                    <img src="../../assets/images/right.svg" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-8 right">
                    <order v-if="change === 'order'"></order>
                    <info v-else></info>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Order from './components/Order.vue'
import Info from './components/Info.vue'
export default {
    name: 'settinginfo',
    components: {
        Order,
        Info
    },
    data() {
        return {
            change: 'order',
        }
    },
    methods: {
        handleChange(e){
            this.change = e;
        }
    }
}
</script>

<style scoped>
.main {
    height: auto;
    margin-top: 3rem;
    margin-bottom: 4rem;
}
.container{
    height: auto;
}
.left .card {
    height: 450px;
    border-radius: 0%;
}

.left .card-header {
    height: 100px;
    background-color: white;
}

.left .avatar img {
    width: 65px;
    height: 65px;
}

.left .name img {
    width: 16px;
}

.left .edit span {
    width: 50px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .15);
    cursor: pointer;
    font-size: 11px;
    word-spacing: normal;
    color: #8d9095;
    font-family: "å¾®è½¯é›…é»‘", Helvetica, Arial, Verdana, sans-serif;
    padding: 2px;
}

.left .card-body {
    padding: 0;
}

.left .card-body ul {
    padding: 0;
}

.left .card-body ul li {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    cursor: pointer;
}

.left .card-body img {
    width: 18px;
}

.left .card-body span {
    color: #333;
    font-size: 16px;
}

.left .card-body ul li:hover {
    font-weight: bold;
}

</style>